개발일지📝

목차   WebSocket 을 써보자 프로젝트에서 실시간 위치정보를 공유하는 기능을 개발하기로 했다. ✅ 웹소켓에 접속하면 접속한 유저 리스트를 가져온다.✅ 사용자 위치가 변경될때마다 소켓으로 위치정보를 보내면, 다른 사용자에게는 해당 사용자의 위치정보를 볼 수 있다.✅ 이때, 소켓으로 userId 를 보내면 자동으로 사용자 데이터를 불러오고 받아온 위치(위도,경도)도 함께 포함해서 다른 소켓 유저들에게 보낸다.   실시간 위치정보를 구현하기 위해서는 계속해서 위치데이터를 보내는 과정이 필요한데...이걸 HTTP 로 구현 하기에는 매우 힘들다. HTTP 의 특징 때문인데, 단방향통신인 점 (요청을 해야만 응답을 보낼 수 있음)요청을 할때마다 새롭게 연결해야하는 등 많은 단점이 있다. 양방향 통신을 구현하..

목차        위와 같이 리액트 캘린더를 이용해서 날짜를 받아오고 시간을 받아 올 수 있다.특정 날짜는 비활성화 시킬 수 있는 기능도 있다.(우리 같은 경우에는 예약이 꽉차거나, 휴무일이거나 , 지금으로부터 3개월 내 이외의 값은 disabled 된다.)    1) 리액트 캘린더 설치 (install) npm install react-calendar   2) 리액트 캘린더 사용 (import) import Calendar from 'react-calendar'; import "./Calendar.css";  `react-calendar` 와 `css` import 시켜주기     3) 날짜 가져오기 (Date seleted)  moment(date).format('D')} f..

목차  1) 페이지 구상  1. 상품별 ->  날짜별 ->  시간별 ->  예약 건수(Slot)를 제한하고 싶었다. (마치 네이버 예약처럼!)(보통 주문제작 케이크, 꽃집은 방문 날짜와 시간도 미리 정하게 되는데, 이 부분을 관리할 수 있게 하고싶었다.)다른 예약 플랫폼이 내부적으로 어떻게 관리되는지 세부적인 로직은 모르겠지만,이 경우 날짜, 시간 전부 관리할 수 있어야하기때문에 날짜 + 시간 데이터별 슬롯들을 전부 관리해야했다. 그리고 가게 휴무일이 바뀌다던가 (지정휴무와 고정휴무 두가지 방식을 구현헀다.)다양한 요소들도 슬롯에 영향을 줬기 때문에 데이터 수정이나 이래저래 너무 규모가 커져서 결국 방식을 변경했다.2. (확정) 날짜별로 받을 예약 건수를 지정하자. ⭐대신 시간대는 지정할 수 없다.. →..

목차    해당 프로젝트는 주문제작 소상공인들을 위한 주문 플랫폼 프로젝트입니다.프로젝트에 대한 자세한 내용은 깃허브를 참고해주세요 :)https://github.com/hyejux/Neez\ GitHub - hyejux/Neez: 예약 이젠 더 편리하게, 관리도 손쉽게 NEEZ 에서 경험해보세요! 「주문 제작 예예약 이젠 더 편리하게, 관리도 손쉽게 NEEZ 에서 경험해보세요! 「주문 제작 예약 서비스 "NEEZ "」 - hyejux/Neezgithub.com   [1탄]https://hyejux.tistory.com/828 [프로젝트/Spring Boot/Reactjs] 주문 시스템 구현 (카테고리 부분)목차     해당 프로젝트는 주문제작 소상공인들을 위한 주문 플랫폼 프로젝트입니다.프로젝트에 대한..

목차     해당 프로젝트는 주문제작 소상공인들을 위한 주문 플랫폼 프로젝트입니다.프로젝트에 대한 자세한 내용은 깃허브를 참고해주세요 :)https://github.com/hyejux/Neez GitHub - hyejux/Neez: 예약 이젠 더 편리하게, 관리도 손쉽게 NEEZ 에서 경험해보세요! 「주문 제작 예예약 이젠 더 편리하게, 관리도 손쉽게 NEEZ 에서 경험해보세요! 「주문 제작 예약 서비스 "NEEZ "」 - hyejux/Neezgithub.com     해당 게시물은 기능 구현에 대한 내용을 정리해두었습니다.     1) 페이지 디자인 구상  [관리자 페이지 디자인]       [유저 페이지 디자인]      일단 주문예약 폼 페이지 초기 디자인은 이러했다.  대충 유저페이지는 배달의 민..

목차    0) 이미지 클라우드 처리 프로젝트 진행 중 이미지를 클라우드 처리하기로 하면서다양한 방법을 모색하던 도중 cloudinary 라는 사이트를 통한 클라우드화 방법을 찾아냈다. 간단한 프로젝트용도로 사용할 예정이라면 안성맞춤이다. 일단 비용이 들지 않으며, 기본적으로 무료 용량이 제공되어서 매우 좋다.구현방법도 간단하고 편리하고, 다양한 기능들이 많다.  1) cloudinary 가입하기 https://console.cloudinary.com/ Image and Video Upload, Storage, Optimization and CDNStreamline media management and improve user experience by automatically delivering image..

목차     예전에 진행했던 프로젝트(Mybatis DTO)를 JPA 로 변환해보기로 했다. 전체를 변경하기엔 시간적으로 너무 오래걸릴 것 같아서😰연습차원에서 간단한 조회 구문만 변환 해 볼 것이다.     참고용 ERD 와 기존 Mapper   1)  기존 EmployeeDTO 를 Entity 로 변경 이때 DTO 에서는 authorityName 을 직접 받았었는데   JPA 에서는 Authority 객체로 받기 때문에 이 점을 참고해서 전부 수정해줘야한다.  2) Employee Repository 생성 JpaRepository 를 상속 받으면 , 기본 CRUD 메서드가 자동으로 제공돼서 기본적인 crud 는 커스텀 메서드를 작성하지 않아도 된다. ex) findAll() , findByAll() ..

( 제가 작업했던  프로젝트 코드 기반으로 설명하고 있습니다.)   스프링 시큐리티 비밀번호 암호화에 관한 이론은 이쪽 게시물 참고 ! https://hyejux.tistory.com/801 [Spring Security] BCrypt 해시 함수 알고리즘Spring Security 에서는 BCryptPasswordEncoder 라는 클래스를 제공하는데이 클래스는 비밀번호를 암호화할 때 사용한다. 이때 암호화 방식을 BCrypt 해시 함수 알고리즘을 사용하는데BCrypt 해시 함수 알고hyejux.tistory.com https://hyejux.tistory.com/802 [Spring Security] BCryptPasswordEncoder 클래스[ 스프링 시큐리티 비밀번호 암호화 ] BCryptPass..

목차   ( 제가 작업했던  프로젝트 코드 기반으로 설명하고 있습니다.) 1. 권한 작업 (EmployeeDetails.java)  // 권한 관련 작업을 위한 메서드 @Override public Collection getAuthorities() { Collection authorities = new ArrayList(); try { // Employee의 authorityGrade를 UserRole Enum으로 변환 UserRole role = UserRole.valueOf(employee.getAuthorityGrade()); // 권한에 ROLE_ 접두사 붙여 추가 authorities.add(new SimpleGrantedAuthority("R..

목차   ( 제가 작업했던  프로젝트 코드 기반으로 설명하고 있습니다.)   1. build gradle 에 의존성 추가 //시큐리티 버전은 스프링버전에 따라 사용방법이 완전히 다릅니다. //시큐리티 5버전 => 스프링 부트 2버전 (수업) //시큐리티 6버전 => 스프링 부트 3버전 (문법이 완전 변경되니 주의) implementation 'org.springframework.boot:spring-boot-starter-security' //시큐리티 타임리프에서 사용 implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5' //시큐리티 테스트 testImplementation 'org.springframework.security:sp..